<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }

        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
            /*浮动*/
            float: left;
        }

        .c2{
            background-color: gray;
            height: 200px;
            width: 200px;
            float: left;
        }

        .c3{
            background-color: #222222;
            height: 200px;
            width: 200px;
            float: right;
            margin-right: 100px;
        }
    </style>
</head>
<body>

<!--
浮动元素漂浮依据：
    假如某个div元素A是浮动的，
        情况1：如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
        情况2：如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
-->

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>


</body>
</html>